<%@page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html class="root61">
<head>
<%@include file="/views/common/include/taglib.jsp"%>
<%@include file="/views/common/include/head.jsp"%>
<link type="text/css" rel="stylesheet"
	href="${ctx }/css/dlifestyle/sectionparent.css" source="widget" />
<link type="text/css" rel="stylesheet"
	href="${ctx }/css/dlifestyle/admin.css" source="widget" />
</head>
<style>
.search {
	border-radius: 2px;
	height: 28px;
	width: 28px;
	cursor: pointer;
	float: left;
	margin-left: 15px;
	background-color: #37ced4;
	margin-top: 8px;
}

.search img {
	clear: both;
	display: block;
	width: 28px;
	height: 28px;
}

.inputclass {
	height: 25px;
	border: 1px solid #CBD5DD;
	color: #999999;
	border-radius: 10px;
	margin-top: 3px;
	text-indent: 18px;
	width: 194px;
}
</style>
<body style="margin: 0px;">

	<section class="mainborder">
		<section class="edit_scrollable padder" style="min-height: 300px;">
			<div style="float: left; width: 50%;">
				<div class="form">
					<div class="item" style="border-right: 1px solid #F7F2F2">
						<input id="userId" type="hidden" value="${user.id}"> <label
							class="col-sm-1 editlable">姓名：</label>
						<div class="fl">
							<input class="editform-control" id="uname"
								onblur="checkUserName();" value="${user.username}" type="text"
								maxlength="12" class="text" placeholder="请输入真实姓名"
								<c:if test="${!isAllPermissionHave}">disabled="disabled"</c:if>>
							<em class="emStyle">*</em>
						</div>
					</div>
					<div class="item" style="border-right: 1px solid #F7F2F2">
						<label class="col-sm-1 editlable">昵称：</label>
						<div class="fl">
							<input class="editform-control" id="nickname"
								value="${user.nickname}" type="text" maxlength="20" class="text"
								placeholder="请输入用户昵称"
								<c:if test="${!isAllPermissionHave}">disabled="disabled"</c:if>>
						</div>
					</div>

					<div class="item" style="border-right: 1px solid #F7F2F2">
						<label class="col-sm-1 editlable">性别：</label>
						<div class="fl">
							<input id="sex1" name="sex" type="radio" value="1"
								style="float: left; padding: 0 5px; margin-top: 11px;" checked
								<c:if test="${!isAllPermissionHave}">disabled="disabled"</c:if> /><label
								class="radio">男</label> <i></i> <input id="sex0" name="sex"
								type="radio" value="0"
								style="float: left; padding: 0 5px; margin-top: 11px;"
								<c:if test="${!isAllPermissionHave}">disabled="disabled"</c:if> /><label
								class="radio">女</label> <i></i>
						</div>
					</div>
					<div class="item" style="border-right: 1px solid #F7F2F2">
						<%-- <input id="typeRole" type="hidden" value="${user.userType}"> --%>
						<label class="col-sm-1 editlable">用户类型：</label>
						<div class="fl">
							<c:choose>
								<c:when test="${user.userType == 0 or user.userType == 1}">
									<c:choose>
										<c:when test="${type==1}">
											<select class="editform-control"
												style="height: 29px; width: 197px;" id="userType" required>
												<option value="">--请选择用户类型--</option>
												<option value="0">平台运营</option>
												<option value="1">小区运营</option>
											</select>
										</c:when>
										<c:otherwise>
											<input id="userType" type="hidden" value="${user.userType}">
											<c:forEach items="${userTypes}" var="item"
												varStatus="cStatus">
												<c:if test="${item.value == user.userType}">
													<input class="editform-control" type="text"
														disabled="disabled" value="${item.label}">
												</c:if>
											</c:forEach>
										</c:otherwise>
									</c:choose>
								</c:when>
								<c:otherwise>
									<input id="userType" type="hidden" value="${user.userType}">
									<c:forEach items="${userTypes}" var="item" varStatus="cStatus">
										<c:if test="${item.value == user.userType}">
											<input class="editform-control" type="text"
												disabled="disabled" value="${item.label}">
										</c:if>
									</c:forEach>
								</c:otherwise>
							</c:choose>
						</div>
					</div>
					<c:if test="${user.userType == 1 || user.userType == 0}">
						<div class="item" id="oCompany"
							style="display: block; border-right: 1px solid #F7F2F2">
							<label class="col-sm-1 editlable">运营团队：</label>
							<div class="fl">
								<select class="editform-control"
									<c:if test="${!isAllPermissionHave}">disabled="disabled"</c:if>
									style="height: 31px; width: 197px; margin-top: 2.5px;"
									id="operationCompanyId" required>
									<option value="">--请选择运营团队--</option>
									<c:forEach items="${operationCompanys}" var="item"
										varStatus="cStatus">
										<option value="${item.id}"
											<c:if test="${item.id == user.companyId}">selected="selected"</c:if>>${item.companyName}</option>
									</c:forEach>
								</select>
							</div>
						</div>
					</c:if>
					<c:if test="${user.userType == 2}">
						<div class="item" id="pCompanyId"
							style="display: block; border-right: 1px solid #F7F2F2">
							<label class="col-sm-1 editlable">物业公司：</label>
							<div class="fl">
								<select class="editform-control"
									<c:if test="${!isAllPermissionHave}">disabled="disabled"</c:if>
									style="height: 31px; width: 197px; margin-top: 2.5px;"
									id="proCompanyId" required>
									<option value="">--请选择物业公司--</option>
									<c:forEach items="${propertyCompanys}" var="item"
										varStatus="cStatus">
										<option value="${item.id}"
											<c:if test="${item.id == user.companyId}">selected="selected"</c:if>>${item.companyName}</option>
									</c:forEach>
								</select>
							</div>
						</div>
					</c:if>
					<c:if test="${user.userType == 4}">
						<div class="item" id="dCompanyId"
							style="display: block; border-right: 1px solid #F7F2F2">
							<label class="col-sm-1 editlable">配送公司：</label>
							<div class="fl">
								<select class="editform-control"
									<c:if test="${!isAllPermissionHave}">disabled="disabled"</c:if>
									style="height: 31px; width: 197px; margin-top: 2.5px;"
									id="disCompanyId" required>
									<option value="">--请选择配送公司--</option>
									<c:forEach items="${distributionCompanys}" var="item"
										varStatus="cStatus">
										<option value="${item.id}"
											<c:if test="${item.id == user.companyId}">selected="selected"</c:if>>${item.companyName}</option>
									</c:forEach>
								</select>
							</div>
						</div>
					</c:if>
					<div class="item" style="border-right: 1px solid #F7F2F2">
						<label class="col-sm-1 editlable">电话：</label>
						<div class="fl">
							<input class="editform-control" id="phone" onblur="checkPhone();"
								value="${user.phone}" type="text" class="text" maxlength="11"
								placeholder="请输入电话"
								<c:if test="${!isAllPermissionHave}">disabled="disabled"</c:if>>
							<em class="emStyle">*</em>
						</div>
					</div>
					<div class="item" style="border-right: 1px solid #F7F2F2">
						<label class="col-sm-1 editlable">邮箱：</label>
						<div class="fl">
							<input class="editform-control" id="email" onblur="checkEmial();"
								value="${user.email}" type="text" class="text" maxlength="40"
								placeholder="请输入邮箱"
								<c:if test="${!isAllPermissionHave}">disabled="disabled"</c:if>>
						</div>
					</div>
					<!-- 商户账号需选择店铺 -->

					<c:if test="${user.userType == 3}">
						<div class="item">
							<label class="col-sm-1 editlable">管理店铺：</label>
							<div class="fl" id="showUserShop">
								<button class="editform-control" class="text"
									style="cursor: pointer;" onclick="chooseShop('${user.id}');">点击选择店铺</button>
							</div>
						</div>
					</c:if>
				</div>

			</div>
			<div style="min-height: 0px; float: left; width: 50%; height: 259px; overflow-y: auto; overflow-x: hidden;">
				<div style="height: 50px;">
					<input id="search_condition" type="text" placeholder="请输入角色名称"
						class="form-control"
						style="width: 60%; float: left; height: 25px;" />
					<div class="search" onclick="searchRole()">
						<img src="${ctx }/images/table/search_second.png">
					</div>
				</div>
				<div id="myFrom">
					<div class="form" style="min-height: 0px;">
						<div style="padding: 0 0;">
							<div class="table_boder">
								<table style="width: 100%;">
									<tbody id="tableTbody">
										<tr>
											<c:choose>
												<c:when test="${user.id != null }">
													<td style="float: left; margin-left: 8%; width: 90%" id="userRoles">
														<c:forEach items="${roles}" var="item" varStatus="rStatus">
															<div id="text2" style="height: 40px; float: left; line-height: 40px;">
																<div id="text1" style="display: inline-block; float: left; width: 20px;">
																	<input id="checked" type="hidden" value="${item.id}">
																	<input id="checked1" type="hidden" value="${item.roleName}"> 
																	<input id="roleLen" type="hidden" value="${fn:length(roles)}"> 
																	<input type="checkbox" style="vertical-align: middle; cursor: pointer; margin-top: -1px;"
																		<c:if test="${item.disabled == true}">disabled="disabled"</c:if>
																		onclick="checkRu('${item.id}','${item.roleName}',this,${item.disabled});" id="rStatus${item.id}" /> 
																	<span style="padding-right: 10px; display: inline-block">
																		<!--遍历已选择的角色，并且打勾  --> 
																		<c:if test="${fn:length(uRoles) >0}">
																			<c:forEach items="${uRoles}" var="uRole" varStatus="uStatus">
																				<c:if test="${item.id == uRole.roleId }">
																					<input id="length" type="hidden" value="${fn:length(uRoles)}">
																					<input id="userRole${uStatus.index }" type="hidden" value="${uRole.roleId}">
																					<input id="userRoleDisabled${uStatus.index }" type="hidden" value="${uRole.disabled}">
																					<input id="userRoleName${uStatus.index }" type="hidden" value="${uRole.roleName}">
																				</c:if>
																			</c:forEach>
																		</c:if>
																	</span>
																</div>
																<div style="vertical-align: middle; float: left; padding-left: 5px;">${item.roleName}</div>
															</div>
														</c:forEach>
													</td>
												</c:when>
												<c:otherwise>
													<td id="userRoles"
														style="float: left; margin-left: 8%; width: 90%"><c:choose>
															<c:when test="${user.userType ==  0}"></c:when>
															<c:otherwise>
																<c:forEach items="${roles}" var="item"
																	varStatus="rStatus">
																	<div
																		style="height: 40px; line-height: 40px; /* width:40%; */ float: left;">
																		<div
																			style="display: inline-block; float: left; width: 20px;">
																			<input id="checked" type="hidden" value="${item.id}">
																			<input id="checked1" type="hidden"
																				value="${item.roleName}"> <input
																				id="roleLen" type="hidden"
																				value="${fn:length(roles)}"> <input
																				type="checkbox"
																				style="vertical-align: middle; cursor: pointer; margin-top: -1px;"
																				<c:if test="${item.disabled == true}">disabled="disabled"</c:if>
																				onclick="checkRu('${item.id}','${item.roleName}',this);"
																				id="rStatus${item.id}" />
																		</div>
																		<div
																			style="vertical-align: middle; float: left; padding-left: 5px;">${item.roleName}</div>
																	</div>
																</c:forEach>
															</c:otherwise>
														</c:choose></td>
												</c:otherwise>
											</c:choose>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!--展示已选角色列表  -->
			<c:if test="${type==1}">
				<div style="height: 150px; width: 100%; overflow-y: auto;">
					<div id="selectedDiv">
						<img style="margin-left: 60px;" src="${ctx }/images/selected.png">
						<span style="margin-left: 8px;">已选角色：</span>
						<hr style="height: 1px; border: 0; background-color: #F7F2F2;">
					</div>
					<div id="choosedRole" style="margin-left: 45px;"></div>
				</div>
			</c:if>

			<c:if test="${type==2}">
				<div style="height: 150px; width: 100%; overflow-y: auto;">
					<div>
						<img style="margin-left: 60px;" src="${ctx }/images/selected.png">
						<span style="margin-left: 8px;">已选角色：</span>
						<hr style="height: 1px; border: 0; background-color: #F7F2F2;">
					</div>
					<div id="choosedRole" style="margin-left: 45px;"></div>
				</div>

			</c:if>

		</section>
	</section>
	<script src="${ctx}/js/controllers/system/user/UserEditController.js"
		type="text/javascript"></script>
	<script type="text/javascript">
		var ctx = '${ctx}';
		setCtx(ctx);
	</script>
	<script type="text/javascript">
	
	//跳转编辑页面时将该用户关联的角色打勾，并且显示在页面得下方
		var item;
		var itemDisabled;
		var itemName;
		var html;
		var len = $("#length").val();
		for(var i=0;i < len;i++){
		    item = $("#userRole"+ i).val();
		    itemDisabled = $("#userRoleDisabled"+ i).val();
		    itemName = $("#userRoleName"+ i).val();
		    if(item == undefined){
		    	continue;
		    }
		    
			$("#rStatus" + item).attr("checked","checked");
			
			html = "<div style='float:left;' id="+"choosed" + item +"><span style='display:block;border-radius:10px;text-align:center;line-height:35px;height:35px;margin-top:15px;padding-left:15px;margin-left:15px;border:0;background-color:#37ced4;color:white'  >"+itemName;
			html +='<img onclick="removeRole('+item+',' + itemDisabled + ')" id="all" src="/manage/images/remove.png" style="cursor:pointer;margin-bottom: -1px;margin-left: 10px;padding-right:10px"/></span></div>';
			$("#choosedRole").append(html);
		}
		
		parent.$("#selectedShopId").val("${shops}");
	</script>
	<!-- 解决ie 6 7 8 9不能显示placeholder的问题 -->
	<script src="${ctx}/js/lib/jquery.JPlaceholder.js"></script>
</body>
</html>
